<!--图谱组件-->
<template>
    <div class='container'>
        <div id="atlasChartDiv"></div>
    </div>
</template>
<script>
import * as echarts from 'echarts';
import { autoToolTip } from "@/utils/echartsAutoTooltip.js";
export default {
    name: '',
    components: {},
    props: {
        dataVColor: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
            atlasChart: "",
            chartData: {
                seriesData: [
                    { name: "待办1", value: 50, color: "#09393a" },
                    { name: "待办2", value: 45, color: "#012d2e" },
                    { name: "待办3", value: 40, color: "#049ea3" },
                    { name: "待办4", value: 50, color: "#036366" },
                    { name: "待办5", value: 80, color: "#049aa3" }
                ]
            }
        };
    },
    computed: {},
    watch: {},
    created() { },
    mounted() { },
    methods: {
        async createAtlasChart() {
            let { chartData } = this;//获取图表数据
            await (this.atlasChart && this.atlasChart.dispose());//若之前有，则销毁实例
            this.atlasChart = echarts.init(document.getElementById('atlasChartDiv'));//初始化echarts
            let maxSymbolSize = 0;
            //找出最大值
            chartData.seriesData.forEach(s => {
                if (s.value > maxSymbolSize) {
                    maxSymbolSize = s.value;
                }
            })
            let option = {
                title: {
                    text: '巡检工作待办',
                    top: "1%",
                    left: 'center',
                    textStyle: {
                        color: "#fff"
                    }
                },
                // tooltip: {
                //     trigger: 'item'
                // },
                series: [{
                    type: 'graph',
                    layout: 'circular',//环形布局
                    scaleLimit: {
                        min: .5,//缩放限制
                        max: 2
                    },
                    zoom: .7,
                    roam: false,
                    label: {
                        normal: {
                            color: "#fff",
                            show: true,
                            position: 'inside',
                            fontSize: 14,
                            fontStyle: '900',
                        }
                    },
                    data: []
                }]
            };
            chartData.seriesData.forEach(s => {
                option.series[0].data.push(
                    {
                        name: s.name,
                        value: s.value,
                        symbolSize: Math.round((s.value / maxSymbolSize) * 100),//尺寸
                        draggable: true,//允许拖拽
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                                {
                                    offset: 0,
                                    color: this.dataVColor[0]
                                },
                                {
                                    offset: 1,
                                    color: "#fff"
                                }
                            ])
                        }
                    }
                )
            });
            await (option && this.atlasChart.setOption(option));//设置数据
            // 自动轮播
            this.chartData.seriesData.length !== 0 &&
                autoToolTip(this.atlasChart, option, {
                    interval: 2000,// 轮播间隔时间 默认2s
                    loopSeries: true,// 是否循环轮播所有序列
                    seriesIndex: 0,// 第1个被轮播的序列下标
                });
        },
    },
};
</script>
<style scoped lang='scss'>
.container {
    height: 100%;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;

    #atlasChartDiv {
        height: 100%;
        width: 100%;
    }
}
</style>